<!--
 * @Description: 轨道车辆统计
 * @Author: Huang Junjie
 * @Date: 2021-10-19 15:07:46
 * @LastEditTime: 2021-10-20 20:36:07
 * @LastEditors: Huang Junjie
-->
<template>
  <div class="content-card">
    <!-- 标题 -->
    <div class="title">
      轨道车辆统计
      <i class="el-icon-more" />
    </div>
    <!-- 标题 -->

    <!-- 统计 -->
    <div class="content">
      <div class="item">
        <div class="circle" style="background-color: #2db7f5;" />
        <div class="inner-item">
          <div>作业车（辆）</div>
          <div class="num">0</div>
        </div>
      </div>
      <div class="item">
        <div class="circle" style="background-color: #808bc6;" />
        <div class="inner-item">
          <div>平板车（辆）</div>
          <div class="num">0</div>
        </div>
      </div>
      <div class="item">
        <div class="circle" style="background-color: #7dc856;" />
        <div class="inner-item">
          <div>轨道吊（辆）</div>
          <div class="num">0</div>
        </div>
      </div>
      <div class="item">
        <div class="circle" style="background-color: #f9bf00;" />
        <div class="inner-item">
          <div>检修车列（辆）</div>
          <div class="num">0</div>
        </div>
      </div>
    </div>
    <!-- 统计 -->
  </div>
</template>

<style lang="scss" scoped>
.content-card {
  position: relative;
  width: 1170px;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid #ebebeb;
  .title {
    color: #666666;
    padding: 5px 0 5px 10px;
    font-weight: 600;
    border-bottom: 1px solid #ebebeb;
    .el-icon-more {
      color: #676767;
      float: right;
      margin-right: 10px;
      cursor: pointer;
    }
    .el-icon-more:hover {
      color: #54B2FC;
      float: right;
      margin-right: 10px;
      cursor: pointer;
    }
  }

  .content {
    position: absolute;
    top: 29px;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    .item {
      display: flex;
      align-items: center;
      // justify-content: center;
      width: 100%;
      padding: 0 10px;
      .circle {
        border-radius: 50%;
        width: 50px;
        height: 50px;
        margin-right: 30px;
      }
      .inner-item {
        font-size: 14px;
        color: #676767;
        line-height: 25px;
        .num {
          color: #666666;
          font-size: 20px;
          font-weight: 600;
        }
        .num:hover {
          color: #54B2FC;
          text-decoration: underline;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
